<template>
  <div>
    <el-button type="primary" size="default" @click="drawer = true"
      >新增账号</el-button
    >
    <el-table :data="tableData" border stripe>
      <el-table-column label="账号名称" prop="username" width="100" />
      <el-table-column label="角色信息" prop="roleId" />
      <el-table-column label="操作" width="140">
        <template #default="scope">
          <el-button type="primary" size="small">编辑</el-button>
          <el-popconfirm
            title="确定不是手抖了？"
            confirmButtonText="确认"
            cancelButtonText="取消"
            icon="WarningFilled"
            iconColor="#f90"
          >
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      title="新增账号"
      v-model="drawer"
      direction="rtl"
      :show-close="true"
    >
      <UserForm />
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import UserForm from "./components/user-form.vue";
import { RoleType } from "../../types/user";
import { ref } from "vue";
import { userGet } from "../../api/user";
import { routeMapTool } from "../../utils/tools";
const tableData = ref<Array<RoleType>>([
  //   { name: "超级管理员", permission: ["/dashboard"] },
]);
const drawer = ref<boolean>(false);
let res = await userGet();
tableData.value = res.data.results;

const routeMap = routeMapTool();
</script>

<style scoped></style>
